<template>
  <el-dialog
    v-model="visible"
    :title="title"
    v-if="!isMobile()"
    draggable
    :before-close="handleClose"
    append-to-body
    :z-index="999"
  >
    <slot name="content"></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
  <el-drawer
    v-else
    v-model="visible"
    :title="title"
    :direction="direction"
    :before-close="handleClose"
    append-to-body
    :z-index="999"
    size="100%"
  >
    <div class="content-wrap">
      <slot name="content"></slot>
    </div>
    <template #footer>
      <div class="pb10 pr10">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";
import { isMobile } from "@/utils/other";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: ""
  },
  direction: {
    type: String,
    default: "rtl"
  }
});

const visible = ref(false);

watch(
  () => props.modelValue,
  val => {
    visible.value = val;
  },
  {
    immediate: true
  }
);

const emit = defineEmits(["update:modelValue"]);

const handleClose = () => {
  emit("update:modelValue", false);
};
</script>

<style scoped lang="scss">
.content-wrap {
  padding: 12px;
}
</style>
